<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue.js"></script>
</head>
<body>
    <div id="root">
        <div>青龙{{str}}白虎{{str}}</div>
        <hr/>
        <div v-text="str">abcdefg</div>
        <div v-html="str">abcdefg</div>
    </div>
</body>
<script>
    // 指令是对元素属性的扩展。所有的指令都是以v-开头。
    // v-text v-html 对应的属性值会将标签中的内容进行重置。
    // 区别：v-html可以让浏览器识别标签，类似于 .innerHTML.   v-text会将值作为文本显示，类似于.innerText
    new Vue({
        el:"#root",
        data:{
			str:"<h3>今天天气不错，挺风和日丽的！</h3>"
        }
    })
</script>
</html>